<template>
  <div>
    <div class="container">

      <!-- 1：分类 -->
      <div class="xx clear">
        <p>当前位置：</p>
        <a href="#">首页</a><p>&gt;</p>
        <a href="#">{{$route.query.type_id==1 ? '狗狗':'猫猫'}}商城</a>
      </div>

      <!-- 2：品种 -->
      <ul class="ff">
        <li class="clear ">
          
          <div class="aa jj ee">{{$route.query.type_id==1 ? '狗狗':'猫猫'}}品种：</div>
          <div class="dd ee">
            <!-- <a href="#"  class="aa a">不限</a> -->
            <template v-if="typeData">
            <a href="#"  class="aa"  v-for="{bid,breed_name,type_id} in typeData.data" :key="bid"
             @click="$router.push(`/buydog?type_id=${type_id}&bid=${bid}`)"
             :class="{changColor:$route.query.bid==bid}"

             >{{breed_name}}</a>
          </template>
                  <!-- <a href="#"  class="aa">博美犬</a>
                  <a href="#"  class="aa">美国恶霸犬</a>
                  <a href="#"  class="aa">法国斗牛犬</a>
                  <a href="#"  class="aa">中华田园犬</a>
                  <a href="#"  class="aa">银狐犬</a>
                  <a href="#"  class="aa">圣伯纳犬</a>
                  <a href="#"  class="aa">哈士奇</a>
                  <a href="#"  class="aa">腊肠犬</a>
                  <a href="#"  class="aa">日本秋田犬</a>
                  <a href="#"  class="aa">金毛寻回犬</a>
                  <a href="#"  class="aa">雪纳瑞犬</a>
                  <a href="#"  class="aa">萨摩耶犬</a>
                  <a href="#"  class="aa">拉布拉多寻回犬</a>
                  <a href="#"  class="aa">阿拉斯加雪橇犬</a>
                  <a href="#"  class="aa">贵宾犬</a>
                  <a href="#"  class="aa">马尔济斯犬</a>
                  <a href="#"  class="aa">罗威纳犬</a>
                  <a href="#"  class="aa">中亚牧羊犬</a>
                  <a href="#"  class="aa">小鹿犬</a>
                  <a href="#"  class="aa">昆明犬</a>
                  <a href="#"  class="aa">柯基犬</a>
                  <a href="#"  class="aa">蝴蝶犬</a>
                  <a href="#"  class="aa">边境牧羊犬</a>
                  <a href="#"  class="aa">藏獒</a>
                  <a href="#"  class="aa">德国牧羊犬</a>
                  <a href="#"  class="aa">日本柴犬</a>
                  <a href="#"  class="aa">骑士查理王小猎犬</a>
                  <a href="#"  class="aa">约克夏梗</a>
                  <a href="#"  class="aa">捷克狼犬</a>
                  <a href="#"  class="aa">英国史宾格犬</a>
                  <a href="#"  class="aa">牛头梗</a>
                  <a href="#"  class="aa">京巴</a>
                  <a href="#"  class="aa">德国杜宾犬</a>
                  <a href="#"  class="aa">巴哥犬</a>
                  <a href="#"  class="aa">中国沙皮犬</a>
                  <a href="#"  class="aa">松狮犬</a>
                  <a href="#"  class="aa">英国古代牧羊犬</a>
                  <a href="#"  class="aa">英国斗牛犬</a>
                  <a href="#"  class="aa">大白熊犬</a>
                  <a href="#"  class="aa">大麦町犬</a>
                  <a href="#"  class="aa">西施犬</a>
                  <a href="#"  class="aa">巴吉度犬</a>
                  <a href="#"  class="aa">英国可卡犬</a>
                  <a href="#"  class="aa">高加索犬</a>
                  <a href="#"  class="aa">苏格兰牧羊犬</a>
                  <a href="#"  class="aa">纽芬兰犬</a>
                  <a href="#"  class="aa">比格犬</a>
                  <a href="#"  class="aa">西高地白梗</a>
                  <a href="#"  class="aa">卡斯罗犬</a>
                  <a href="#"  class="aa">杜高犬</a>
                  <a href="#"  class="aa">阿富汗猎犬</a>
                  <a href="#"  class="aa">伯恩山犬</a>
                  <a href="#"  class="aa">喜乐蒂牧羊犬</a>
                  <a href="#"  class="aa">中国冠毛犬</a>
                  <a href="#"  class="aa">格力犬</a>
                  <a href="#"  class="aa">贝灵顿梗</a>
                  <a href="#"  class="aa">马里努阿犬</a>
                  <a href="#"  class="aa">惠比特犬</a>
                  <a href="#"  class="aa">澳大利亚牧羊犬</a>
                  <a href="#"  class="aa">苏格兰梗</a>
                  <a href="#"  class="aa">猎狐梗</a>
                  <a href="#"  class="aa">拳狮犬</a>
                  <a href="#"  class="aa">威玛猎犬</a>
                  <a href="#"  class="aa">虎斑猎犬 </a>
                  <a href="#"  class="aa">川东猎犬</a>
                  <a href="#"  class="aa">巨型贵宾犬</a> -->
                </div>
        </li>
        <li class="clear">
          
          <div class="aa jj ee">出售地区：</div>
          <div class="dd ee">
            <a href="#"  class="aa a">不限</a>
                  <a href="#"  class="aa">北京市</a>
                  <a href="#"  class="aa">天津市</a>
                  <a href="#"  class="aa">河北省</a>
                  <a href="#"  class="aa">山西省</a>
                  <a href="#"  class="aa">内蒙古自治区</a>
                  <a href="#"  class="aa">辽宁省</a>
                  <a href="#"  class="aa">吉林省</a>
                  <a href="#"  class="aa">黑龙江省</a>
                  <a href="#"  class="aa">上海市</a>
                  <a href="#"  class="aa">江苏省</a>
                  <a href="#"  class="aa">浙江省</a>
                  <a href="#"  class="aa">安徽省</a>
                  <a href="#"  class="aa">福建省</a>
                  <a href="#"  class="aa">江西省</a>
                  <a href="#"  class="aa">山东省</a>
                  <a href="#"  class="aa">河南省</a>
                  <a href="#"  class="aa">湖北省</a>
                  <a href="#"  class="aa">湖南省</a>
                  <a href="#"  class="aa">广东省</a>
                  <a href="#"  class="aa">广西壮族自治区</a>
                  <a href="#"  class="aa">海南省</a>
                  <a href="#"  class="aa">重庆市</a>
                  <a href="#"  class="aa">四川省</a>
                  <a href="#"  class="aa">贵州省</a>
                  <a href="#"  class="aa">云南省</a>
                  <a href="#"  class="aa">西藏自治区</a>
                  <a href="#"  class="aa">陕西省</a>
                  <a href="#"  class="aa">甘肃省</a>
                  <a href="#"  class="aa">青海省</a>
                  <a href="#"  class="aa">宁夏回族自治区</a>
                  <a href="#"  class="aa">新疆维吾尔自治区</a>
                  <a href="#"  class="aa">台湾省</a>
                  <a href="#"  class="aa">香港特别行政区</a>
                  <a href="#"  class="aa">澳门特别行政区</a>
          </div>
        </li>
        <li class="clear">    
          <div class="aa jj ee">出售价格：</div>
          <div class="dd clear aa ee">
            <a href="#"  class="aa a">不限</a>
            <a href="#"  class="aa">2000-3000元</a>
            <a href="#"  class="aa">3000-4000元</a>
            <a href="#"  class="aa">4000-5000元</a>
            <a href="#"  class="aa">5000元以上</a>

            <div class=" aa clear ee">
              <input type="text" placeholder="" value="0" class="cc aa">
              <p class="aa">-</p>
              <input type="text" placeholder="" value="0" class="cc aa">
              <p class="aa">元</p>
              <a href="#" class="LisClaSa aa a">确定</a>
            </div>

          </div>
        </li>
      </ul>		

      <!-- 3：整个div -->
      <div style="margin: 18px auto 110px;">

        <!-- 第一个div -->
        <template v-if="listData">
        <div class="aa" v-for="{pname,bid,psex,pvaccine,pgrade,price,cid} in listData.data" :key="bid">
          <div class="c3-1">
            <a href="#">
              <router-link :to="`/pet_detail?cid=${cid}`">
                 <img src="../../public/dog.jpg" alt="二哈"/>
              </router-link>
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">{{pname}}</a></p>
              <div class="c3-3 aa">{{psex}}</div>
            </div>
            <div class="c3-4">{{pvaccine==0?'未驱虫':'已驱虫'}}{{pgrade}}{{pname}}</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">{{pgrade}}</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">{{pvaccine==0?'未驱虫':'已驱虫'}}</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">{{price}}</div>
              <div class="c3-10">精品精宠</div>
            </div>
          </div>
        </div>
      </template>
    <template  v-if="byname_data">
      <div class="aa" v-for="{pname,bid,psex,pvaccine,pgrade,price,cid} in byname_data.data" :key="bid">
          <div class="c3-1">
            <a href="#">
              <router-link :to="`/pet_detail?cid=${cid}`">
                 <img src="../../public/dog.jpg" alt="二哈"/>
              </router-link>
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">{{pname}}</a></p>
              <div class="c3-3 aa">{{psex}}</div>
            </div>
            <div class="c3-4">{{pvaccine==0?'未驱虫':'已驱虫'}}{{pgrade}}{{pname}}</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">{{pgrade}}</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">{{pvaccine==0?'未驱虫':'已驱虫'}}</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">{{price}}</div>
              <div class="c3-10">精品精宠</div>
            </div>
          </div>
        </div>
    </template>

      
      
        <!-- <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

     
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

       
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

      
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

       
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

      
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

       
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

      
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

       
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

      
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

       
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

        
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

        
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

      
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div> -->

        <!-- 第二个 -->
        <!-- <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div> -->

        <!-- 第二个 -->
        <!-- <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

      
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

      
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div>

       
        <div class="aa">
          <div class="c3-1">
            <a href="#">
              <img src="../../public/dog.jpg" alt="二哈">
            </a>
          </div>
          <div class="c3-2">
            <div style="margin-top: 12px;" class="GH clear">
              <p class="aa"><a href="#">博美犬</a></p>
              <div class="c3-3 aa">公</div>
            </div>
            <div class="c3-4">已驱虫的宠物级博美犬</div>
            <div class="GS clear">
              <div style="background: #fffae3;" class="c3-5 aa">宠物级</div>
              <div style="background: #e7f8f1;" class="c3-6 aa">1岁5月3天</div>
              <div style="background: #fcdfe1;" class="c3-7 aa">已驱虫</div>
            </div>
            <div class="c3-8 clear">
              <div class="c3-9 aa">¥1500.00</div>
              <div class="c3-10">精品精宠</div>
            </div>
        </div>
        </div> -->

        

      </div>
      
      <!-- 4：分页 -->
      <div class="page clear ">
        <ul>
          <li class="disabled"><a>«</a></li> 
          <li class="active"><a>1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">»</a></li>
        </ul>	
      </div>
    
    </div>
  </div>
</template>


<script>
import { watch } from 'vue'
  import '../assets/css/reset.css'
    export default {
      watch:{
        $route(){
          this.getPetData(),
           this.getPetList()
        }
       },
        data() {
         
          return {
            typeData: null,
            listData: null,
            byname_data:null,
            pnum:0
          }
        },
        mounted(){
           this.getPetData(),
           this.getPetList(),
           this.getProByNname()
        },
        methods: {
          getPetData() {
            console.log(this.$route.query.type_id);
            const url=`/v1/pet_shop/buydog?type_id=${this.$route.query.type_id}`
            this.axios.get(url).then(res=>{
              console.log(res);
              this.typeData=res.data
            })
          },
          getPetList(){
            console.log(this.$route.query.type_id);
              console.log(this.$route.query.bid);
             const url=`/v1/pet_shop/buydog_list?type_id=${this.$route.query.type_id}&bid=${this.$route.query.bid}`
            this.axios.get(url).then(res=>{
              console.log(res);
              this.listData=res.data
            })
        },
        getProByNname() {
            const url=`/v1/pet_shop/searchPname?pname=${this.$route.query.pname}`
            this.axios.get(url).then(res=>{
                this.byname_data=res.data 
               console.log('宠物名商品数据：',res);
            })
        },
       
    }
  }
</script>

<style lang="scss" scoped>
@import '../assets/css/buydog.css';

.changColor{
  color: orange;
}

</style>




